<template>
  <!-- CancelAfterVerificationList 核销 -->
  <view class="container">
    <Header title="核销" />
    <Paglist
      v-model="dataList"
      :is-init-api="false"
      :parame="parame"
      @register="register"
      :scroll-top-bottom="260"
    >
      <template v-for="v in dataList" :key="v.id">
        <CouponItem
          :img="v.couponCover"
          :title="v.couponName"
          :show-item-bottom="false"
          @click="chooseItem(v)"
        >
          <template #midText>
            <view class="mid-text">
              <template v-for="item in couponStatusText(v.status)" :key="v">
                <view :style="{ color: item.color }">{{ item.text }}</view>
              </template>
              <view class="is-selected">
                <text>有效期 {{ `${v.validityStartTime} - ${v.validityEndTime}` }}</text>
                <image
                  v-if="selected.includes(v.id)"
                  class="icon"
                  src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/selected-icon.png"
                />
                <image v-else class="icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/select-icon.png" />
              </view>
            </view>
          </template>
        </CouponItem>
      </template>
    </Paglist>
    <TButtonGroup>
      <TButton
        class="gutter-btn"
        text="立即核销"
        custom-class="cardBtn"
        @click="onSubmit"
      />
    </TButtonGroup>
  </view>
</template>

<script lang="ts" setup>
  /**  CancelAfterVerificationList  核销 */
  import Header from '@/components/Header/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { CouponOrderStatusEnum } from '@/enums/memberCouponEnum';
  import { onLoad } from '@/router';
  import dictionary from '@/utils/dictionary';
  import { provide, reactive, ref } from 'vue';
  import CouponItem from '../../components/CouponItem.vue';
  import { Toast } from '@/utils';
  import {
    AppUserCouponOrderMemberListData,
    AppUserCouponOrderMemberListResult,
  } from '@/api/memberCoupon/types';
  import { appUserCouponOrderMemberList, verificationOrder } from '@/api/memberCoupon';
  import TButtonGroup from "@/components/TButtonGroup/index.vue";
  import TButton from "@/components/TButtonGroup/TButton.vue";

  const dataList = ref<AppUserCouponOrderMemberListResult[]>([]);
  const selected = ref<number[]>([]);
  const parame = reactive<AppUserCouponOrderMemberListData>({
    current: 1,
    size: 10,
    status: CouponOrderStatusEnum.RECEIVED
  });

  provide('api', appUserCouponOrderMemberList);
  const [register, { refresh }] = useConList();

  const couponStatusText = (status: CouponOrderStatusEnum) => {
    const dicts = dictionary.getLocal('couponReceivedStatus');
    const item = dicts.find((v) => v.dictValue == status);
    return [
      {
        color: item?.statusColor,
        text: item?.dictLabel,
      },
    ];
  };

  function chooseItem(item: any) {
    if (selected.value.includes(item.id)) {
      const index = selected.value.findIndex((v) => v == item.id);
      index !== -1 && selected.value.splice(index, 1);
    } else {
      selected.value.push(item.id);
    }
  }

  function onSubmit() {
    if (!selected.value.length) {
      return Toast('请选择', 'none', 1500, false);
    }
    uni.showModal({
      title: '提示',
      content: '是否立即核销?',
      success: ({ confirm }) => {
        if (confirm) {
          verificationOrder({ couponOrderIds: selected.value }).then(() => {
            refresh();
            Toast('核销成功');
          });
        }
      },
    });
  }

  onLoad<'CancelAfterVerificationList'>(({ phone, verificationCode }) => {
    parame.phone = phone?.toString();
    parame.verificationCode = verificationCode;
    refresh();
  });

  provide('tabIsShow', null);
</script>

<style lang="scss" scoped>
  .mid-text {
    font-size: 24rpx;
    .is-selected {
      color: #aaabab;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon {
        width: 32rpx;
        height: 32rpx;
        transition: all 0.3s;
      }
    }
  }
</style>
